If you have any questions that are beyond the scope of this documentation, please feel free to email or contact us via my page.

Uplon is a fully responsive premium web UI kit built with awesome bootstrap v4.3.1. It comes with super clean user interfaces, many ready to use and highly customizable components and widgets. The power of SASS and easy code allows any developer to turn this theme into real web application. By the way, I have added basic version of PHP to get started with it if you are using PHP based framework.

We really care for our buyers and so in case if you have any question or feedback, please feel free to get back to us.

I have tried to follow the standards and modular structure while developing the theme. Following sections are explaining the theme File & Folder, structure, html file struture and plugins.

File & Folder Structure



├── html files
Src/assets/
├── scss/
│   └── All SCSS files
├── css/
│   └── All css files.
├── fonts/
├── pages/
│   └── All the pages related scripts
├── images/
│   └── All images
├── plugins/
│   └── The plugins files - which are not available through bower
└── js/
    └── All common Javascripts files

HTML Structure


CSS & Sass


Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

All the css files are pre-compiled using compass compiler and provided inside the assets/css/ folder. In case if you are not familiar with sass/scss or don't have any environment setup which can be used to compile these files, you can use these CSS files directly. But if you are familiar with saas, I'll suggest you to use the scss files.

Note that you will need to install compass, nodejs, npm, gulp etc in order to compile the scss file. I am sure you know this ;)

Files are explained below:

File Description
bootstrap Uplon uses the bootstrap v4.3.1 The main style.sccs already imports the customized bootstrap styles.
style.sccs/style.css This is main style file. The scss version is importing all the custom scss files. Each of the scss file is containing style for speicic element. E.g Buttons, checkbox, icons, forms, etc.
_variable.scss This file is containing all the constants values. This allows you to easily customize may things including colors, fonts, text sizes, etc.
_pages.scss Pages contains the styles for all supported third-party JS/CSS plugins. It has overwritten version of styles.
_components.scss This is the one of the core and important file. It contains the styles for all the components, ui elements, and some other parts of the theme.
_forms.scss The form's related styles are available into this file. You can easily change the styles for some of form elements.
_icons.scss Combines various font icons. You should remove the fonts you don't plan to use from this file and recompile it.
_common.scss Common contains some common styles used in various pages.
_buttons.scss Button styles are available here.
_charts.scss All the chart related styles are present into this file.
_checkbox-radio.scss Custom checkboxes and radio button styles are available in this file.
_helper.scss Some of the helper classes are available in this file.
_menu.scss This includes the style for topbar, left side bar and right sidebar.
_modal.scss Contains the style for modals.
_notifications.scss Notifications related styles are available in this file.
_progress.scss Progress bar related styles are available in this file.
_sweetalert.scss Sweet alert related custom styles are available in this file.
_tables.scss All the tables related styles are available in this file.
_tour.scss Product tour related styles are available in this file.
_treeview.scss Tree view widgets styles are available here.
_typography.scss Typography are available in this file.
_widgets.scss Contains the widgets related styles.

Javascript


Uplon uses jQuery, Bootstrap JS framework(at its core) and some of the third-party plugins. There are may more third party plugin which you can use according to your needs. The css is already containing matching style for these plugins so you will not need to do anything around it.

Files are explained below:

File Description
jquery.js, bootstrap.js, jquery.nicescroll, jquery.slimscroll, etc. These files are used at core of the theme.
jquery.app.js This is a main js file. It contains the custom JS code needed for features including layout, sidebar, etc.
jquery.core.js This file contains the definition of some of the key components (e.g. notifications, portlet, etc) and code (for self-initialization) related to some of the controls (e.g. modal, range-slider, switchery, multiselect, etc)
pages/*.js These are the files containing pages specific code. They are mainly used for demo purpose.
plugins/**.js All supported and integrated third-party plugins are included in here.

Plugin's usage information

Page Plugin CSS Plugin js Custom js
ui-modal.html custombox.min.css custombox.min.js , legacy.min.js -
ui-notification.html toastr.min.css toastr.min.js -
components-range-sliders.html ion.rangeSlider.css , ion.rangeSlider.skinFlat.css ion.rangeSlider.min.js jquery.ui-sliders.js
components-sweet-alert.html sweet-alert.css sweet-alert.min.js jquery.sweet-alert.init.js
components-ratings.html hopscotch.min.css hopscotch.min.js -
components-treeview.html - jquery.raty-fa.js jquery.rating.js
components-tour.html hopscotch.min.css hopscotch.min.js -
calendar.html fullcalendar.css jquery-ui.min.js, moment.js, fullcalendar.min.js jquery.fullcalendar.js
form-advanced.html bootstrap-tagsinput.css, multi-select.css, select2.min.css jquery.multi-select.js, bootstrap-tagsinput.js, jquery.quicksearch.js, select2.full.min.js, bootstrap-maxlength.min.js autocomplete/jquery.mockjax.js, autocomplete/countries.js, jquery.autocomplete.min.js jquery.autocomplete.init.js, jquery.formadvanced.init.js
form-validation.html - parsley.min.js -
form-pickers.html bootstrap-timepicker.min.css,bootstrap-colorpicker.min.css,bootstrap-datepicker.min.css,bootstrap-clockpicker.min.css,bootstrap-daterangepicker/daterangepicker.css bootstrap-timepicker.min.js,bootstrap-colorpicker.min.js,bootstrap-datepicker.min.js,bootstrap-clockpicker.js,daterangepicker.js jquery.form-pickers.init.js
form-wizard.html jquery.steps.css jquery.validate.min.js,jquery.steps.min.js jquery.wizard-init.js
form-mask.html - bootstrap-inputmask.min.js, autoNumeric.js -
form-uploads.html jquery.filer.css, jquery.filer-dragdropbox-theme.css jquery.filer.min.js jquery.fileuploads.init.js
form-xeditable.html bootstrap-editable.css bootstrap-editable.min.js jquery.xeditable.js
tables-datatable.html dataTables.bootstrap4.min.css, buttons.bootstrap4.min.css, responsive.bootstrap4.min.css datatables/jquery.dataTables.min.js, dataTables.bootstrap4.min.js, dataTables.buttons.min.js, buttons.bootstrap4.min.js, jszip.min.js, pdfmake.min.js, vfs_fonts.js, buttons.html5.min.js, buttons.print.min.js, buttons.colVis.min.js, dataTables.responsive.min.js, responsive.bootstrap4.min.js -
tables-responsive.html rwd-table.min.css rwd-table.min.js -
tables-tablesaw.html tablesaw.css tablesaw.js, tablesaw-init.js -
chart-flot.html - jquery.flot.js , jquery.flot.time.js , jquery.flot.tooltip.min.js , jquery.flot.resize.js , jquery.flot.pie.js , jquery.flot.selection.js , jquery.flot.stack.js , jquery.flot.orderBars.min.js , jquery.flot.crosshair.js jquery.flot.init.js
chart-morris.html morris.css morris.min.js , raphael-min.js morris.init.js
chart-chartjs.html - chart.min.js chartjs.init.js
chart-peity.html - jquery.peity.min.js -
chart-chartist.html chartist.min.css chartist.min.js jquery.chartist.init.js
chart-c3.html c3.min.css d3.min.js, c3.min.js, jquery.c3-chart.init.js
chart-sparkline.html - jquery.sparkline.min.js jquery.charts-sparkline.js
chart-knob.html - jquery.knob.js -

The theme contains various utilies including some helper classes, widgets, etc. Please see below some helper classes.

Helper Classes:

Class Description
.p-0 Removes all padding space
.p-20 Adds 20px padding
.m-0 Remove all margin
.m-r-5 Adds 5px right margin
.m-t-10 Adds 10px top margin
.m-t-20 Adds 20px top margin
.m-t-30 Adds 30px top margin
.m-t-50 Adds 50px top margin
.m-b-10 Adds 10px bottom margin
.m-b-15 Adds 15px bottom margin
.m-b-20 Adds 20px bottom margin
.m-b-30 Adds 30px bottom margin
.w-xs Minimum width 80px
.w-sm Minimum width 95px
.w-md Minimum width 110px
.w-lg Minimum width 140px
.font-13 font size 13px

Once again thank you for your purchase. I'll be happy to answer the the questions you have related to the theme. In case if you have any suggestion or feature, request please feel free to contact me, I'll try to implement it and will release as part of future updates.

Stay Awesome!

- Coderthemes

Version 1.9.0     19 March 2019

  • Updated Bootstrap v4.3.1
  • Some bugs are fixed
  • Updated Plugins:
    • jQuery v3.1.1 to v3.3.1
    • jquery.nicescroll v3.5.0 to v3.7.6
    • jquery.scrollTo v1.4.6 to v2.1.2
    • jquery.slimscroll v1.3.6 to v1.3.8
    • morris.js v0.5.0 to v0.5.1
    • Raphaël v2.1.4 to v2.2.7
    • Waypoints v4.0.0 to v4.0.1
    • custombox v3.0.2 to v4.0.3
    • Ion.RangeSlider v2.0.10 to v2.3.0
    • sweatalert2 v8.2.1
    • jQuery Raty v0.1.1 to v0.1.2
    • jsTree v3.2.1 to v3.3.7
    • hopscotch v0.2.5 to v0.3.1
    • moment v2.10.6 to v2.24.0
    • jQuery UI v1.11.4 to v1.12.1
    • Chartist.js v0.9.4 to v0.11.0
    • jQuery Knob v1.2.11 to v1.2.13
    • Select2 v4.0.1 to v4.0.6-rc.1
    • bootstrap-maxlength v1.6.0 to v1.7.0
    • MockJax (AutoComplete) v1.5.3 to v2.5.0
    • Autocomplete v1.2.24 to v1.4.9
    • Parsleyjs v2.1.3 to v2.8.1
    • bootstrap-daterangepicker v2.0.11 to v3.0.3
    • jQuery Validation v1.14.0 to v1.19.0
    • dropify v0.2.0 to v0.2.2
    • Responsive Tables v5.3.1 to v5.3.3
    • chart jsTree v2.1.4 to v2.7.3
    • Peity v3.2.0 to v3.3.0
    • Isotope v3.0.1 to v3.0.6

Version 1.8.0     01 Nov 2018

  • Updated Bootstrap v4.1.3
  • Some bugs are fixed
  • Some plugins are updated

Version 1.7.0     20 Apr 2018

  • Updated Bootstrap v4.1.0
  • Added new datatables
  • Some bugs are fixed

Version 1.6.0     04 September 2017

  • Updated Bootstrap v4.0.0-beta

Version 1.5.0     27 April 2017

  • Updated Bootstrap v4.0.0-alpha.6

Version 1.4.0     23 Sep 2016

  • Added horizontal layout (PHP Version).
  • Added pricing page.
  • Added gallery page.
  • Added maintenance page.
  • Added coming soon page.
  • Some bugs are fix.

Version 1.3.0     31 Aug 2016

  • Added Frontend template.

Version 1.2.0     10 Aug 2016

  • Added horizontal layout.
  • Some bugs are fix.

Version 1.1.0     07 July 2016

  • Added dropdown page.
  • Added rating page.
  • Added calendar.
  • Added icon pe7 page.
  • Some bugs are fix.

Version 1.0.0     10 Jun 2016

  • Initial released

Copyright © 2016 Coderthemes.